<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PPT模拟备课</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
        }

        .left-panel {
            width: 15%;
        }

        .right-panel {
            width: 80%;
        }

        #ppt-list {
            list-style: none;
            padding: 0;

        }

        #ppt-list li {
            margin-bottom: 10px;
            cursor: pointer;
            border: 1px solid #ccc;
            padding: 20px;
        }

        #ppt-list li.active {
            border: 1px solid #000;
        }

        .upload-area {
            margin-bottom: 20px;
        }

        .slide-preview img {
            max-width: 100%;
            max-height: 400px;
            margin-bottom: 20px;
        }

        .notes textarea {
            width: 90%;
            resize: vertical;
        }
        .delete-slide{
            float: right;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left-panel">
            <h2>PPT列表</h2>
            <ul id="ppt-list">
                <!-- PPT列表项将通过jQuery动态生成 -->
            </ul>
            <button id="add-slide">新增PPT</button>
        </div>
        <div class="right-panel">
            <div class="upload-area" style="display: none;">
                <input type="file" id="upload-slide" accept="image/*">
            </div>
            <div class="slide-preview">
                <img id="current-slide" src="" alt="Current Slide" style="display: none;">
            </div>
            <div class="notes">
                <h2>备注</h2>
                <textarea id="notes-input" rows="10" cols="40" placeholder="请输入演讲稿或备注信息..."></textarea>
            </div>
        </div>
    </div>

    <script src="../js/jquery.js"></script>
    <script>
        $(document).ready(function () {
            var pptList = JSON.parse(localStorage.getItem('pptList')) || [];
            setTimeout(function () {
                    $("#ppt-list li:eq(0)").click()
             },200)
            function renderPPTList() {
                $('#ppt-list').empty();
                for (var i = 0; i < pptList.length; i++) {
                    $('#ppt-list').append(
                        '<li data-index="' +
                        i +
                        '">' +
                        '第'+(i+1)+'张' +
                        '<button class="delete-slide">删除</button></li>'
                    );
                }
            }

            renderPPTList();

            $('#add-slide').on('click', function () {
                $('#upload-slide').click();
            });

            $(document).on('click', '#ppt-list li', function () {
                var index = $(this).data('index');
                $("#current-slide").show()
                showSlide(index);
            });

            $(document).on('click', '.delete-slide', function (e) {
               
                e.stopPropagation();
                var index = $(this).closest('li').data('index');
                pptList.splice(index, 1);
                localStorage.setItem('pptList', JSON.stringify(pptList));
                renderPPTList();
                if($("#ppt-list li").length==0){
                    $("#current-slide").hide()
                }
            });

            $('#upload-slide').on('change', function (e) {
                var file = e.target.files[0];
                var reader = new FileReader();
                reader.onload = function (e) {
                    var filePath = e.target.result;
                    $('#current-slide').attr('src', filePath);
                    pptList.push({ name: '', filepath: filePath, notes: '' });
                    localStorage.setItem('pptList', JSON.stringify(pptList));
                    renderPPTList();
                };
                reader.readAsDataURL(file);
                $('#notes-input').val('')
                setTimeout(function () {
                    $("#ppt-list li:last").click()
                },200)
            });

            $('#notes-input').on('input', function () {
                var index = $('#ppt-list li.active').data('index');
                pptList[index].notes = $(this).val();
                localStorage.setItem('pptList', JSON.stringify(pptList));
            });

            function showSlide(index) {
                $('#ppt-list li').removeClass('active');
                $('#ppt-list li[data-index="' + index + '"]').addClass('active');
                $('#current-slide').attr('src', pptList[index].filepath || '');
                $('#notes-input').val(pptList[index].notes);
            }
        });
    </script>
</body>

</html>